<template>
  <div style="margin: 10px">
    <div style="margin-bottom: 10px">
      <el-row :gutter="1">
        <el-col :span="4"
          >设备编码:
          <el-input
            v-model="queryUser.deviceCode"
            clearable
            style="width: 160px"
        /></el-col>
        <el-col :span="4"
          >设备名称:
          <el-input
            v-model="queryUser.deviceName"
            clearable
            style="width: 160px"
        /></el-col>
        <el-col :span="7"> </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="queryUserPage">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <div>
        <el-button
          style="margin: 5px 0px"
          @click="createUserBtn(true, '新增设备')"
          size="small"
          >新增设备</el-button
        >
      </div>
      <el-table :data="tableData" border style="width: 100%; height: 500px">
        <el-table-column prop="id" label="ID" width="120" />
        <el-table-column prop="deviceCode" label="设备编码" width="120" />
        <el-table-column prop="deviceName" label="设备名称" width="120" />
        <el-table-column prop="remarks" label="备注" width="200" />
        <el-table-column prop="address" label="绑定地址" width="250" />
        
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="changeUser(scope.row)"
              >修改</el-button
            >
            <!-- <el-button link type="primary" size="small" @click="disable(scope.row)">禁用</el-button> -->
            <el-button
              link
              type="danger"
              size="small"
              @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange(currentPage)"
        />
      </div>
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      label-width="auto"
      style="max-width: 600px"
      draggable
      overflow
    >
      <h2 style="margin-top: -30px">{{ dialogTitle }}</h2>

      <el-form :model="form" label-width="auto" style="max-width: 400px">
        <el-form-item
          label="设备编码"
          prop="deviceCode"
          :rules="[{ required: true, message: '设备编码必填' }]"
        >
          <el-input v-model="form.deviceCode" autocomplete="off" />
        </el-form-item>

        <el-form-item
          label="设备名称"
          prop="deviceName"
          :rules="[{ required: true, message: '设备名称必填' }]"
        >
          <el-input v-model="form.deviceName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="form.remarks" autocomplete="off" />
        </el-form-item>

        <el-form-item label="绑定地址">
          <el-tree-select
            v-model="positionId"
            :data="data"
            :render-after-expand="false"
            style="width: 240px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveUser"> 提交 </el-button>

          <el-button @click="dialogFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import * as deviceApi from "@/api/deviceApi";

import * as positionApi from "@/api/positionApi";

const tableData = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const dialogFormVisible = ref(false);

const dialogTitle = ref();

const form = reactive({
  id: null,
  deviceName: "",
  deviceCode: "",
  remarks: "",
  positionId:null
});

const queryUser = reactive({
  deviceName: "",
  deviceCode: "",
  pageSize: pageSize.value,
  pageCurrent: currentPage.value,
});

function createUserBtn(show, title) {
  dialogFormVisible.value = show;
  form.deviceCode = null;
  form.deviceName = null;
  form.remarks = null;
  form.id = null;
  form.positionId = null
  dialogTitle.value = title;
}

function handleCurrentChange(currentPage) {
  queryUser.pageCurrent = currentPage;
  deviceApi.page(queryUser).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}

function queryUserPage() {
  deviceApi.page(queryUser).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}


function changeUser(data) {
  form.deviceCode = data.deviceCode;
  form.deviceName = data.deviceName;
  form.remarks = data.remarks;
  form.id = data.id;
  form.positionId = data.positionId;
  positionId.value = data.address;

  dialogFormVisible.value = true;
  dialogTitle.value = "修改设备";
}

function saveUser() {
  var pattern = new RegExp("[\u4E00-\u9FA5]+");
  if(!pattern.test(positionId.value)){
    form.positionId =  positionId.value;
  }
  deviceApi.save(form).then((response) => {
    if (response.data.code == 200) {
      ElMessage("保存成功");
      dialogFormVisible.value = false;
      queryUserPage();
    }
  });

  createUserBtn(false);
}

function remove(data) {
  deviceApi.remove(data).then((response) => {
    if (response.data.code == 200) {
      ElMessage("删除成功");
      queryUserPage();
    }
  });
}

const positionId = ref();

const data = ref([]); 


function getTree() {
  positionApi.tree().then((response) => {
    data.value = response.data.data;
  });
}

function handleSizeChange() {}

onMounted(() => {
  queryUserPage();
  getTree();
});

// 生命周期钩子
onMounted(() => {});
</script>

<style>
</style>
